<template>
  <div ref='charts' :class="className" :style="{height:height,width:width}" />
</template>


<script>
import Echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
export default {
   mixins: [resize],
  data() {
    return {
      chart: null,
      obj:[]
    }
  },

  // props: ['echartObj'],
 props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    echartObj: {
      type: Object,
      required: true
    }
  },
  mounted() {
    this.obj=this.echartObj
    this.$nextTick(() => {
      this.loadEchart()
    })
  },
  watch:{
    echartObj(newVal,oldVal){
        this.obj=newVal
        this.loadEchart() 
    },
  },
  methods: {
    loadEchart() {
       this.chart = Echarts.init(this.$el, 'macarons')
      this.chart.setOption(
       this.obj
      )
    },
  },
}
</script>